<!DOCTYPE html>
<html>
<head>
	<title>超市管理系统</title>
</head>
<body>
	<h1>超市管理系统</h1>
	<nav>
		<ul>
			<li><a href="#商品管理">商品管理</a></li>
			<li><a href="#会员管理">会员管理</a></li>
			<li><a href="#员工管理">员工管理</a></li>
			<li><a href="#销售管理">销售管理</a></li>
			<li><a href="#供应管理">供应管理</a></li>
			<li><a href="#仓库管理">仓库管理</a></li>
			<li><a href="#财务管理">财务管理</a></li>
			<li><a href="#系统管理">系统管理</a></li>
		</ul>
	</nav>
	<section id="商品管理">
		<h2>商品管理</h2>
		<table>
			<thead>
				<tr>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品库存</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>可乐</td>
					<td>2.5元</td>
					<td>100瓶</td>
				</tr>
				<tr>
					<td>雪碧</td>
					<td>2.5元</td>
					<td>80瓶</td>
				</tr>
				<tr>
					<td>薯片</td>
					<td>5元</td>
					<td>50包</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加商品()">添加商品</button>
		<button onclick="修改商品()">修改商品</button>
		<button onclick="删除商品()">删除商品</button>
	</section>
	<section id="会员管理">
		<h2>会员管理</h2>
		<table>
			<thead>
				<tr>
					<th>会员编号</th>
					<th>会员姓名</th>
					<th>会员等级</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>张三</td>
					<td>普通会员</td>
				</tr>
				<tr>
					<td>002</td>
					<td>李四</td>
					<td>银卡会员</td>
				</tr>
				<tr>
					<td>003</td>
					<td>王五</td>
					<td>金卡会员</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加会员()">添加会员</button>
		<button onclick="修改会员()">修改会员</button>
		<button onclick="删除会员()">删除会员</button>
	</section>

    <section id="员工管理">
		<h2>员工信息列表</h2>
		<table>
			<thead>
				<tr>
					<th>员工编号</th>
					<th>员工姓名</th>
					<th>员工职位</th>
					<th>员工电话</th>
					<th>员工邮箱</th>
					<th>员工地址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>张三</td>
					<td>收银员</td>
					<td>13888888888</td>
					<td>zhangsan@example.com</td>
					<td>北京市朝阳区</td>
				</tr>
				<tr>
					<td>002</td>
					<td>李四</td>
					<td>仓库管理员</td>
					<td>13999999999</td>
					<td>lisi@example.com</td>
					<td>北京市海淀区</td>
				</tr>
				<tr>
					<td>003</td>
					<td>王五</td>
					<td>采购员</td>
					<td>13666666666</td>
					<td>wangwu@example.com</td>
					<td>北京市西城区</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加员工()">添加员工</button>
		<button onclick="修改员工()">修改员工</button>
		<button onclick="删除员工()">删除员工</button>

		<h2>添加员工信息</h2>
		<form>
			<label for="员工编号">员工编号：</label>
			<input type="text" id="员工编号" name="员工编号"><br>
			<label for="员工姓名">员工姓名：</label>
			<input type="text" id="员工姓名" name="员工姓名"><br>
			<label for="员工职位">员工职位：</label>
			<input type="text" id="员工职位" name="员工职位"><br>
			<label for="员工电话">员工电话：</label>
			<input type="text" id="员工电话" name="员工电话"><br>
			<label for="员工邮箱">员工邮箱：</label>
			<input type="email" id="员工邮箱" name="员工邮箱"><br>
			<label for="员工地址">员工地址：</label>
			<input type="text" id="员工地址" name="员工地址"><br>
			<button type="submit">添加员工</button>
		</form>

		<h2>修改员工信息</h2>
		<form>
			<label for="员工编号">员工编号：</label>
			<input type="text" id="员工编号" name="员工编号"><br>
			<label for="员工姓名">员工姓名：</label>
			<input type="text" id="员工姓名" name="员工姓名"><br>
			<label for="员工职位">员工职位：</label>
			<input type="text" id="员工职位" name="员工职位"><br>
			<label for="员工电话">员工电话：</label>
			<input type="text" id="员工电话" name="员工电话"><br>
			<label for="员工邮箱">员工邮箱：</label>
			<input type="email" id="员工邮箱" name="员工邮箱"><br>
			<label for="员工地址">员工地址：</label>
			<input type="text" id="员工地址" name="员工地址"><br>
			<button type="submit">修改员工</button>
		</form>
	</section>

	<section id="销售管理">
		<h2>销售记录列表</h2>
		<table>
			<thead>
				<tr>
					<th>销售时间</th>
					<th>销售商品</th>
					<th>销售数量</th>
					<th>销售金额</th>
					<th>销售员工</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>2021-01-01 10:00:00</td>
					<td>可乐</td>
					<td>2瓶</td>
					<td>5元</td>
					<td>张三</td>
				</tr>
				<tr>
					<td>2021-01-02 11:00:00</td>
					<td>雪碧</td>
					<td>3瓶</td>
					<td>7.5元</td>
					<td>李四</td>
				</tr>
				<tr>
					<td>2021-01-03 12:00:00</td>
					<td>薯片</td>
					<td>4包</td>
					<td>20元</td>
					<td>王五</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加销售记录()">添加销售记录</button>
		<button onclick="修改销售记录()">修改销售记录</button>
		<button onclick="删除销售记录()">删除销售记录</button>
		<h2>销售统计</h2>
		<label for="开始时间">开始时间：</label>
		<input type="datetime-local" id="开始时间" name="开始时间"><br>
		<label for="结束时间">结束时间：</label>
		<input type="datetime-local" id="结束时间" name="结束时间"><br>
		<button onclick="生成统计报表()">生成统计报表</button>
		<p>销售总金额：100元</p>
		<p>销售总数量：9瓶2包</p>
		<h2>添加销售记录</h2>
		<form>
			<label for="销售时间">销售时间：</label>
			<input type="datetime-local" id="销售时间" name="销售时间"><br>
			<label for="销售商品">销售商品：</label>
			<input type="text" id="销售商品" name="销售商品"><br>
			<label for="销售数量">销售数量：</label>
			<input type="text" id="销售数量" name="销售数量"><br>
			<label for="销售金额">销售金额：</label>
			<input type="text" id="销售金额" name="销售金额"><br>
			<label for="销售员工">销售员工：</label>
			<input type="text" id="销售员工" name="销售员工"><br>
			<button type="submit">添加销售记录</button>
		</form>

	</section>

	<section id="供应管理">
		
		<h2>供应商信息列表</h2>
		<table>
			<thead>
				<tr>
					<th>供应商编号</th>
					<th>供应商名称</th>
					<th>联系人</th>
					<th>联系电话</th>
					<th>联系地址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>北京供应商</td>
					<td>张三</td>
					<td>13888888888</td>
					<td>北京市朝阳区</td>
				</tr>
				<tr>
					<td>002</td>
					<td>上海供应商</td>
					<td>李四</td>
					<td>13999999999</td>
					<td>上海市浦东新区</td>
				</tr>
				<tr>
					<td>003</td>
					<td>广州供应商</td>
					<td>王五</td>
					<td>13666666666</td>
					<td>广州市天河区</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加供应商()">添加供应商</button>
		<button onclick="修改供应商()">修改供应商</button>
		<button onclick="删除供应商()">删除供应商</button>
	</section>
	<section id="进货记录管理">
		<h2>进货记录列表</h2>
		<table>
			<thead>
				<tr>
					<th>进货时间</th>
					<th>进货商品</th>
					<th>进货数量</th>
					<th>进货单价</th>
					<th>供应商名称</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>2021-01-01 10:00:00</td>
					<td>可乐</td>
					<td>100瓶</td>
					<td>2.5元</td>
					<td>北京供应商</td>
				</tr>
				<tr>
					<td>2021-01-02 11:00:00</td>
					<td>雪碧</td>
					<td>80瓶</td>
					<td>2.5元</td>
					<td>上海供应商</td>
				</tr>
				<tr>
					<td>2021-01-03 12:00:00</td>
					<td>薯片</td>
					<td>50包</td>
					<td>5元</td>
					<td>广州供应商</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加进货记录()">添加进货记录</button>
		<button onclick="修改进货记录()">修改进货记录</button>
		<button onclick="删除进货记录()">删除进货记录</button>
	</section>
	<section id="仓库管理">
		<h2>供应商信息列表</h2>
		<table>
			<thead>
				<tr>
					<th>供应商编号</th>
					<th>供应商名称</th>
					<th>联系人</th>
					<th>联系电话</th>
					<th>联系地址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>001</td>
					<td>北京供应商</td>
					<td>张三</td>
					<td>13888888888</td>
					<td>北京市朝阳区</td>
				</tr>
				<tr>
					<td>002</td>
					<td>上海供应商</td>
					<td>李四</td>
					<td>13999999999</td>
					<td>上海市浦东新区</td>
				</tr>
				<tr>
					<td>003</td>
					<td>广州供应商</td>
					<td>王五</td>
					<td>13666666666</td>
					<td>广州市天河区</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加供应商()">添加供应商</button>
		<button onclick="修改供应商()">修改供应商</button>
		<button onclick="删除供应商()">删除供应商</button>

		<h2>进货记录列表</h2>
		<table>
			<thead>
				<tr>
					<th>进货时间</th>
					<th>进货商品</th>
					<th>进货数量</th>
					<th>进货单价</th>
					<th>供应商名称</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>2021-01-01 10:00:00</td>
					<td>可乐</td>
					<td>100瓶</td>
					<td>2.5元</td>
					<td>北京供应商</td>
				</tr>
				<tr>
					<td>2021-01-02 11:00:00</td>
					<td>雪碧</td>
					<td>80瓶</td>
					<td>2.5元</td>
					<td>上海供应商</td>
				</tr>
				<tr>
					<td>2021-01-03 12:00:00</td>
					<td>薯片</td>
					<td>50包</td>
					<td>5元</td>
					<td>广州供应商</td>
				</tr>
			</tbody>
		</table>
		<button onclick="添加进货记录()">添加进货记录</button>
		<button onclick="修改进货记录()">修改进货记录</button>
		<button onclick="删除进货记录()">删除进货记录</button>
	</section>
  
	<section id="财务管理">
		<h1>财务管理</h1>
		<form>
		  <label for="income">收入：</label>
		  <input type="number" id="income" name="income"><br><br>
		  <label for="expenses">支出：</label>
		  <input type="number" id="expenses" name="expenses"><br><br>
		  <label for="savings">储蓄：</label>
		  <input type="number" id="savings" name="savings" readonly><br><br>
		  <input type="button" value="计算" onclick="calculateSavings()">
		</form>
		<script>
		  function calculateSavings() {
			var income = document.getElementById("income").value;
			var expenses = document.getElementById("expenses").value;
			var savings = income - expenses;
			document.getElementById("savings").value = savings;
		  }
		</script>
	</section>

	<section id="系统管理">
		<h1>系统管理</h1>
		<ul>
		  <li><a href="#users">用户管理</a></li>
		  <li><a href="#permissions">权限管理</a></li>
		  <li><a href="#logs">日志管理</a></li>
		</ul>
		<div id="users">
		  <h2>用户管理</h2>
		  <table>
			<tr>
			  <th>用户名</th>
			  <th>邮箱</th>
			  <th>操作</th>
			</tr>
			<tr>
			  <td>张三</td>
			  <td>zhangsan@example.com</td>
			  <td>
				<button>编辑</button>
				<button>删除</button>
			  </td>
			</tr>
			<tr>
			  <td>李四</td>
			  <td>lisi@example.com</td>
			  <td>
				<button>编辑</button>
				<button>删除</button>
			  </td>
			</tr>
		  </table>
		</div>
		<div id="permissions">
		  <h2>权限管理</h2>
		  <table>
			<tr>
			  <th>角色名称</th>
			  <th>权限</th>
			  <th>操作</th>
			</tr>
			<tr>
			  <td>管理员</td>
			  <td>管理用户、权限和日志</td>
			  <td>
				<button>编辑</button>
				<button>删除</button>
			  </td>
			</tr>
			<tr>
			  <td>普通用户</td>
			  <td>查看日志</td>
			  <td>
				<button>编辑</button>
				<button>删除</button>
			  </td>
			</tr>
		  </table>
		</div>
		<div id="logs">
		  <h2>日志管理</h2>
		  <table>
			<tr>
			  <th>用户名</th>
			  <th>操作</th>
			  <th>时间</th>
			</tr>
			<tr>
			  <td>张三</td>
			  <td>登录</td>
			  <td>2021-01-01 10:00:00</td>
			</tr>
			<tr>
			  <td>李四</td>
			  <td>修改权限</td>
			  <td>2021-01-02 11:00:00</td>
			</tr>
		  </table>
		</div>
	
	</section>

	<script>
		function 添加商品() {
			// 实现添加商品的操作
		}
		function 修改商品() {
			// 实现修改商品的操作
		}
		function 删除商品() {
			// 实现删除商品的操作
		}
		function 添加会员() {
			// 实现添加会员的操作
		}
		function 修改会员() {
			// 实现修改会员的操作
		}
		function 删除会员() {
			// 实现删除会员的操作
		}
		function 添加员工() {
			// 实现添加员工的操作
		}
		function 修改员工() {
			// 实现修改员工的操作
		}
		function 删除员工() {
			// 实现删除员工的操作
		}
	</script>
</body>
</html>
